{% load staticfiles %}
{% load widget_tweaks %}
{#{% load crispy_forms_tags %}#}
<!DOCTYPE html>
<html lang="en" class="app">
<head>
  <meta charset="utf-8" />
  <title>Aurora | 原创音乐者交流平台</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="{% static 'js/jPlayer/jplayer.flat.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/Lobibox.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/animate.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/simple-line-icons.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/font.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/app.css' %}" type="text/css" />
    <!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
  <![endif]-->
</head>
<body class="bg-info dker" style="overflow-y: auto">
  <section id="content" class="m-t-lg wrapper-md animated fadeInUp">
    <div class="container aside-xl">
      <a class="navbar-brand block"><span class="h1 font-bold">上传音乐</span></a>
      <section class="m-b-lg">
        <header class="wrapper text-center">
          <strong>Aurora | 畅游音乐海洋</strong>
        </header>
          {% csrf_token %}
          <p>
              <label for="id_name">音乐名称:</label>
              <input type="text" name="name" class="form-control rounded input-lg" maxlength="30" id="id_name">
          </p>
          <p>
              <label for="id_category">音乐流派:</label>
              <select name="category" class="form-control rounded input-lg" required id="id_category">
              {% for cate in category %}
                  <option value="{{ cate.id }}">{{ cate.name }}</option>
              {% endfor %}
          </select>
          </p>
          <p>
              <label for="id_is_original">是否原创:</label>
              <select name="is_original" class="form-control rounded input-lg" id="id_is_original">
                  <option value="0">原创</option>
                  <option value="1">转载</option>
              </select>
          </p>
          <p>
              <label for="id_is_download">是否允许下载:</label>
              <select name="is_download" class="form-control rounded input-lg" id="id_is_download">
                <option value="0">允许</option>
                <option value="1">不允许</option>
              </select>
          </p>
          <p>
              <label for="id_summary">简介:</label>
              <input type="text" name="summary" class="form-control rounded input-lg" maxlength="200" id="id_summary"/>
          </p>
          <p>
              <label>音乐文件:</label>
              <input type="file" name="music_src" class="form-control rounded input-lg" required id="id_music_src"/>
          </p>
          <p>
              <label for="id_music_cover">音乐封面:</label>
              <input type="file" name="music_cover" class="form-control rounded input-lg" id="id_music_cover"><input type="hidden" name="user" id="id_user">
          </p>
          <button onclick="music_upload()" type="button" class="btn btn-lg btn-warning lt b-white b-2x btn-block btn-rounded"><i class="icon-arrow-right pull-right"></i><span class="m-r-n-lg">立即上传</span></button>
      </section>
    </div>
  </section>
  <script type="text/javascript">
    function upload_toast(status, msg)
    {
        Lobibox.notify(status, {
            icon: false,
            sound: false,
            msg: msg
        })
    }
  </script>
  <script type="text/javascript">
      function music_upload() {
          var form_data = new FormData();
          form_data.append("name", $('#id_name').val());
          form_data.append("category", $('#id_category option:selected').val());
          form_data.append("is_original", $('#id_is_original option:selected').val());
          form_data.append("is_download", $('#id_is_download option:selected').val());
          form_data.append("summary", $('#id_summary').val());
          form_data.append("music_src", $('#id_music_src')[0].files[0]);
          form_data.append("music_cover", $('#id_music_cover')[0].files[0]);

          $.ajax({
              url: "{% url 'music:music_upload' %}",
              type: "post",
              data: form_data,
              contentType: false,
              processData: false,
              headers: {"X-CSRFToken": $('[name="csrfmiddlewaretoken"]').val()},
              beforeSend: upload_toast('info', '上传中'),
              success: function (data) {
                  upload_toast(data.status, data.msg);
                  if (data.status === 'success'){
                      window.location.href = "{% url 'music:index' %}"
                  }
              },
              error: function () {
                  upload_toast('error', '上传失败!')
              }

          })
      }
  </script>
  <!-- footer -->
  <footer id="footer">
    <div class="text-center padder">
      <p>
        <small>Aurora原创音乐者交流平台<br>&copy; 2019</small>
      </p>
    </div>
  </footer>
  <!-- / footer -->
  <script src="{% static 'js/jquery.min.js' %}"></script>
  <script src="{% static 'js/lobibox.min.js' %}"></script>
  <!-- Bootstrap -->
  <script src="{% static 'js/bootstrap.js' %}"></script>
  <!-- App -->
  <script src="{% static 'js/app.js' %}"></script>
  <script src="{% static 'js/slimscroll/jquery.slimscroll.min.js' %}"></script>
  <script src="{% static 'js/app.plugin.js' %}"></script>
</body>
</html>